<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>分析生命周期</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 准备好一个容器-->
        <div id="root">
            <h1 id="h2">当前和为{{sum}}</h1>
            <button @click="add">点我+1</button>
            <button @click='death'>销毁</button>
        </div>
    </body>
        <script type="text/javascript">
            Vue.config.productionTip = false
            const vm = new Vue({
                el:'#root',
                data:{
                    sum:0
                }, 
                methods: {
                    add(){
                        console.log('sum被人点了')
                        this.sum += 1
                    },
                    death(){
                        this.$destroy()
                    }
                },
                watch:{
                    sum(){
                        console.log('@@@sum被人改了')
                    }
                },
                // 初始化之前
                beforeCreate() {
                    console.log('beforeCreate')
                    // debugger;
                },
                //  初始化
                created() {
                    console.log('created')
                    // debugger
                },

                // 挂载之前
                beforeMount() {
                    console.log('beforeMount')
                    // const h2= document.getElementById('h2')
                    // h2.innerText= '哈哈'
                },

                // 挂载完毕
                mounted() {
                    console.log('mounted')
                    // const h2 = document.getElementById('h2')
                    // h2.innerText = '哈哈'
                    // debugger
                },

                // 将要销毁
                beforeDestroy() {
                    console.log('beforeDestroy')
                },

                // 已经销毁
                destroyed() {
                    console.log('destroyed')
                },
            })
        </script>
</html>